<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            background: #ccc;
        }

        .cm{
            width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            margin-top: 20px;
        }
        table{
            border-collapse: collapse;
            width: 600px;
            margin: 0 auto;
        }
        th,td{
            border: 1px solid black;
            margin: auto;
        }

        .func-box{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
    <script>
        window.onload=function(){
            var cinemas=[{
                name:"拯救大兵瑞恩",
                year:2000,
                star:3
            },{
                name:"大话西游",
                year:1988,
                star:2

            },{
                name:"我和僵尸有个约会",
                year:1997,
                star:1
            },{
                name:"恋爱大过天",
                year:2005,
                star:4
            },{
                name:"全城热恋",
                year:2007,
                star:5
            }]
            var tbody=document.querySelector("tbody");
            var tfoot=document.querySelector("tfoot th");
            var showList=function(){
                var content="";
                for(var i=0;i<cinemas.length;i++){
                    content=content+"<tr index="+i+"><td><input type='checkbox' class='select'/>"+cinemas[i].name+"</td><td>"+cinemas[i].year+"</td><td><button class='btn-min'>-</button><span>"+cinemas[i].star+"</span><button  class='btn-add'>+</button></td><td><button class='btn-delete'>" + "删除" + "</button></td></tr>";
                }
                tbody.innerHTML=content;
                var chkSelects=document.querySelectorAll(".select");

                //计算星星的总数
                var totalStar=0;
                for(var i=0;i<cinemas.length;i++){
                    chkSelects[i].checked=cinemas[i].isCheck;
                    if(cinemas[i].isCheck){
                        totalStar=totalStar+cinemas[i].star;
                    }
                }
                tfoot.innerText="总星星:"+totalStar;

                for(var i=0;i<chkSelects.length;i++){
                    chkSelects[i].addEventListener("change",function(e){
                        var state=this.checked;
                        var td=this.parentNode;
                        var tr=td.parentNode;
                        var index=tr.getAttribute("index");
                        cinemas[index].isCheck=state;
                        showList();
                    })
                }
                var selectAll=document.querySelector(".select-all");
                selectAll.addEventListener("change",function(e){
                    var state=selectAll.checked;
                    for(var i=0;i<cinemas.length;i++){
                        cinemas[i].isCheck=state;
                    }
                    showList();
                })
                var btnDels=document.querySelectorAll(".btn-delete");
                for(var i=0;i<btnDels.length;i++){
                    btnDels[i].addEventListener("click",function(e){
                        var td=this,parentNode;
                        var tr=td.parentNode;
                        var index=tr.getAttribute("index");
                        cinemas.splice(index,1);
                        showList();
                    })
                }
                var btnAdds=document.querySelectorAll(".btn-add");
                for(var i=0;i<btnAdds.length;i++){
                    btnAdds[i].addEventListener("click",function(e){
                        var td=this.parentNode;
                        var tr=td.parentNode;
                        var index=tr.getAttribute("index");
                        var star=cinemas[index].star;
                        cinemas[index].star=star+1;
                        showList();
                    });
                }
                var btnMins=document.querySelectorAll(".btn-min");
                for(var i=0;i<btnMins.length;i++){
                    btnMins[i].addEventListener("click",function(e){
                        
                        var td=this.parentNode;
                        
                        var tr=td.parentNode;
                        var index=tr.getAttribute("index");
                        var star=cinemas[index].star;
                        cinemas[index].star=star-1;

                        showList();
                    });
                }
        }
        showList();
        }
    </script>




</head>
<body>
    <div class="cm">
        <h1>电影评分</h1>
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" class="select-all"/>作品名字</th>
                <th>年份</th>
                <th>评分</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <th colspan="4"></th>
            </tr>
        </tfoot>
    </table>
    </div>
</body>
</html>